<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-21 19:07:30
 * @Description  : 颜色选择器
-->

<template>
  <div class="round overflow-hidden w-[30px] !h-[28px]">
    <n-color-picker
      :render-label="renderColorLabel"
      size="small"
      class="!w-[20px] !h-[20px]"
      :value="color"
      @update:value="handleValueChange"
      :show-alpha="false"
      :swatches="colorArr"
      default-value="#000"
    />
  </div>
</template>

<script setup lang="ts">
defineProps<{
  color: string
}>()

const emits = defineEmits<{
  (e: 'update:color', value: string): void
}>()

import { colorArr } from '@/constants/color'
const renderColorLabel = (color: string | null) => {
  return ''
}

const handleValueChange = (value: string) => {
  emits('update:color', value)
}
</script>

<style scoped lang="scss">
.round {
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #eee;
  border-left: none;

  :deep(.n-color-picker-trigger__fill *) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    border-radius: 50%;
    border: none;
  }
  :deep(.n-color-picker-trigger__fill) {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    left: 0;
    top: 0;
    right: 0;
    left: 0;
    border: none;
  }

  :deep(.n-color-picker-trigger) {
    border: none;
  }
}
</style>
